<template>
  <div ref="Graph" :style="{ width: width, height: height }" />
</template>
<script>
export default {
  name: 'Graph',
  data() {
    return {
      data2:[],
      linksData2:[]
    }
  },
  props: {
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '400px'
    },
    data:{
      type:Array,
      default:()=>[]
    },
  },
  watch:{
    data:{
      handler(val){
        this.data2 = val[0];
        this.linksData2 = val[1];
        this.makeChart()
      },
      deep:true
    },
  },
  components: {},

  filters: {},

  computed: {},

  created() {},

  activated() {},

  mounted() {
  },

  methods: {
    // 数据遍历转换（主要是计算多重关系所显示的不同弧度值）
    changeData() {
      let data, linksData
      data = this.data2
      linksData = this.linksData2
      var arr = [];
      for (const i in linksData) {
        linksData[i].count = 0;
        arr.push(linksData[i]);
      }
      for (const i in linksData) {
        for (const j in arr) {
          if ((arr[j].count === 0 && arr[j].source === linksData[i].source && arr[j].target === linksData[i].target) ||
            (arr[j].target === linksData[i].source && arr[j].source === linksData[i].target) ) {
            ++linksData[i].count;
          }
        }
      }
      for (const i in linksData) {
        linksData[i].label = {
          show: true,
          formatter: function(x) {
            return x.data.relationshipRate // 自定义线条之间的关系名称
          }
        };
        linksData[i].lineStyle = {
          opacity:0.7,
          curveness: (linksData[i].count ) * 0.1 // 线条弧度
        };
      }
      return {
        data,
        linksData
      }
    },
    makeChart() {
      let myChart = this.$echarts.init(this.$refs.Graph)
      let list = this.changeData()
      let data = list.data
      let linksData = list.linksData
      // console.log(JSON.stringify(data));
      // console.log(JSON.stringify(linksData));
      let option = {
        backgroundColor: '#fff', // 设置背景颜色
        title: {
          text: '亲密度',
          top: 12,
          left: 12,
          textStyle: {
            fontSize: 14,
            color: '#444444'
          }
        },
        tooltip: {
          trigger: 'none'
        }, // 提示框
        animationDurationUpdate: 1500,
        animationEasingUpdate: 'quinticInOut',
        select:{
          disabled:true,
          selectedMode:false,
        },
        series: [
          {
            type: 'graph',
            layout: 'circular',
            symbolSize: 50, // 倘若该属性不在link里，则其表示节点的大小；否则即为线两端标记的大小
            roam: true, // 鼠标缩放功能
            label: {
              show: true // 是否显示标签
            },
            focusNodeAdjacency: true, // 鼠标移到节点上时突出显示结点以及邻节点和边
            edgeSymbol: ['none', 'arrow'], // 关系两边的展现形式，也即图中线两端的展现形式。arrow为箭头
            edgeSymbolSize: [6, 6], // 设置两边箭头大小
            draggable: false,  //节点是否可以拖拽
            edgeLabel: {
              fontSize: 14 // 关系（也即线）上的标签字体大小
            },
            force: {
              repulsion: 400, // 节点之间的斥力因子值
              edgeLength: 170 // 两个节点之间的距离
            },
            data: data,
            links: linksData,
            lineStyle: {
              opacity: 0.9,
              width: 2,
              dashOffset:20,
              color: 'red', // 设置线条颜色 8ab7bd
              // curveness: 0.1 // 设置线条的弧度
            },
            itemStyle: {
              color: '#61a0a8',
              fontSize: 12,
              borderWidth: 1,
              borderColor: '#ffffff',
              shadowColor: 'rgba(0, 0, 0, 0.2)',
              shadowBlur: 8
            }
          }
        ]
      }

      myChart.setOption(option, true)
      setTimeout(function() {
        window.onresize = function() {
          myChart.resize()
        }
      }, 200)
    //   myChart.on("click",function(data){
    //     for (const i in linksData) {
    //       if (data.data.id == linksData[i].source) {
    //         linksData[i].label = {
    //           show: true,
    //           formatter: function(x) {
    //             return x.data.relationshipRate // 自定义线条之间的关系名称
    //           }
    //         };
    //         linksData[i].lineStyle = {
    //           opacity:0.7,
    //           curveness: (linksData[i].count - 1) * 0.3 // 线条弧度
    //         };
    //       }
    //     }
    //     console.log(linksData);
    //   })
    }
  }
}
</script>
<style scoped>
/* @import url(); 引入css类 */
</style>
